<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>多主键测试管理</el-breadcrumb-item>
        <el-breadcrumb-item>多主键测试列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-form">
        <el-form ref="searchForm" :model="searchParams" inline>
            <el-form-item label="ConfigKey">
                <el-input v-model.trim="searchParams.configKey" clearable />
            </el-form-item>
            <el-form-item label="ConfigType">
                <el-input v-model.number="searchParams.configType" clearable />
            </el-form-item>
            <!-- <template v-for="item in searchParamsConfig" :key="item.field">
                <el-form-item :label="item.label" :prop="item.field">
                    <el-input v-model.trim="searchParams[item.field]" clearable />
                </el-form-item>
            </template> -->
            <el-form-item>
                <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="list-table">
        <div class="operation-btns">
            <el-button @click="add" icon="el-icon-plus" type="primary">添加</el-button>
        </div>
        <el-table ref="tableRef" :data="dataPageList.list" @sort-change="handleSortChange" @row-dblclick="detail" stripe>
            <el-table-columns :columns="columns"></el-table-columns>
            <el-table-column prop="operations" label="操作" width="140" fixed="right">
                <template #default="{row}">
                    <table-operations :edit="true" @edit="edit(row)"
                                      :copy="true" @copy="edit(row, true)"
                                      :switch-deleted="false"
                                      :del="true" @del="del(row)">
                    </table-operations>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :total="dataPageList.total" :page-sizes="pageSizeOptions" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <api-multi-config-detail :pk="editPk" :visible="detailDrawerVisible" @edit="edit" @del="del" />
    <api-multi-config-save :pk="editPk" :visible="saveDrawerVisible" :operateType="operateType" @save="save" />
</template>

<script lang="ts">
import { defineComponent, reactive, ref, provide, onMounted } from 'vue'
import { OperateRequests } from '@/composables/models'
import { PageSizeOptions } from '@/constants'
import { getOperations } from '@/composables/operations'
import { pageListSearch, handleSortChange } from '@/composables/requests'
import ElTableColumns from '@/components/ElTableColumns.vue'
import TableOperations from '@/components/TableOperations.vue'
import ApiMultiConfigSave from './ApiMultiConfigSave.vue'
import ApiMultiConfigDetail from './ApiMultiConfigDetail.vue'

const columns = [
    { name: "configKey", label: "ConfigKey", sortable: true },
    { name: "configType", label: "ConfigType", sortable: true },
    { name: "configValue", label: "ConfigValue" },
]

const pkFields = ['configKey', 'configType']
const apisRequest: OperateRequests = {
    disable: { url: '/api-multi-config/disable', method: 'PATCH' },
    enable: { url: '/api-multi-config/enable', method: 'PATCH' },
    delete: { url: '/api-multi-config/delete', method: 'DELETE' }
}

const searchParamsConfig = [
    { label: 'ConfigKey', type: 'string', field: 'configKeyContains' },
]

export default defineComponent({
    components: { ElTableColumns, TableOperations, ApiMultiConfigSave, ApiMultiConfigDetail },
    name: "ApiMultiConfigIndex",
    setup() {
        const searchParams = reactive<any>({})
        const defaultSortParams = {
        }
        const sortParams = reactive<any>({ ...defaultSortParams })
        const tableRef = ref()

        const { pageNum, pageSize, dataPageList, search } = pageListSearch({ url: '/api-multi-config/page-list', method: 'GET' }, searchParams, sortParams, (list: any[]) => list.map(item => ({ ...item, key: item.configKey + ':' + item.configType })))

        const { editPk, saveDrawerVisible, detailDrawerVisible, operateType, detail, add, del, edit, save } = getOperations(apisRequest, dataPageList, pkFields, search)
        provide('closeSaveDrawer', () => saveDrawerVisible.value = false)
        provide('closeDetailDrawer', () => detailDrawerVisible.value = false)

        onMounted(() => {
            search()
        })

        return {
            tableRef,
            columns,
            handleSortChange: handleSortChange(sortParams, defaultSortParams, search),
            pageSizeOptions: PageSizeOptions,
            searchParams, pageNum, pageSize,
            searchParamsConfig,
            search,
            dataPageList,
            operateType,
            saveDrawerVisible,
            detailDrawerVisible,
            editPk,
            detail,
            add,
            edit,
            save,
            del,
        }
    }
})
</script>

<style scoped>
</style>
